<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
    <!-- 顶部个人信息栏 -->
    <view class="header-section">
      <view class="user-profile">
        <view class="avatar-wrapper">
          <view v-if="!avatar" class="cu-avatar">
            <text class="iconfont icon-people"></text>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar" mode="aspectFill"></image>
        </view>
        <view class="user-details">
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <text class="username">{{ name }}</text>
            <text class="user-role">普通用户</text>
          </view>
        </view>
      </view>
    </view>

    <view class="content-section">
      <view class="menu-list">
        <view class="menu-group">
          <view class="list-cell" @click="handleToSetting">
            <view class="menu-item-box">
              <view class="left">
                <text class="iconfont icon-setting menu-icon"></text>
                <text>应用设置</text>
              </view>
              <text class="iconfont icon-arrow-right arrow"></text>
            </view>
          </view>
        </view>
        
        <view class="logout-btn" @click="handleLogout" v-if="name">
          <text>退出登录</text>
        </view>
      </view>
    </view>
    
    <!-- 装饰性背景元素 -->
    <view class="decoration-circle circle-1"></view>
    <view class="decoration-circle circle-2"></view>
  </view>
</template>

<script>
  import storage from '@/utils/storage'
  
  export default {
    data() {
      return {
        name: this.$store.state.user.name,
        version: getApp().globalData.config.appInfo.version
      }
    },
    computed: {
      avatar() {
        return this.$store.state.user.avatar
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
    methods: {
      handleToInfo() {
        this.$tab.navigateTo('/pages/mine/info/index')
      },
      handleToEditInfo() {
        this.$tab.navigateTo('/pages/mine/info/edit')
      },
      handleToSetting() {
        this.$tab.navigateTo('/pages/mine/setting/index')
      },
      handleToLogin() {
        this.$tab.reLaunch('/pages/login')
      },
      handleToAvatar() {
        this.$tab.navigateTo('/pages/mine/avatar/index')
      },
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/index')
          })
        })
      },
      handleHelp() {
        this.$tab.navigateTo('/pages/mine/help/index')
      },
      handleAbout() {
        this.$tab.navigateTo('/pages/mine/about/index')
      },
      handleJiaoLiuQun() {
        this.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
      },
      handleBuilding() {
        this.$modal.showToast('模块建设中~')
      }
    }
  }
</script>

<style lang="scss">
page {
  background: #f5f7fa;
  min-height: 100vh;
}

.mine-container {
  width: 100%;
  position: relative;
  overflow: hidden;

  .header-section {
    padding: 30px 20px;
    position: relative;
    z-index: 1;
    background: #fff;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    .user-profile {
      display: flex;
      align-items: center;
      
      .avatar-wrapper {
        position: relative;
        
        .cu-avatar {
          width: 70px;
          height: 70px;
          border-radius: 15px;
          background: #f5f7fa;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
          border: 2px solid #fff;
          overflow: hidden;
          
          .iconfont {
            font-size: 35px;
            color: #3c96f3;
          }
        }
      }

      .user-details {
        margin-left: 15px;
        
        .login-tip {
          font-size: 18px;
          color: #333;
          font-weight: 500;
        }
        
        .user-info {
          .username {
            font-size: 20px;
            color: #333;
            font-weight: bold;
            display: block;
            margin-bottom: 6px;
          }
          
          .user-role {
            font-size: 13px;
            color: #3c96f3;
            background: rgba(60,150,243,0.1);
            padding: 3px 10px;
            border-radius: 20px;
          }
        }
      }
    }
  }

  .content-section {
    padding: 0 12px;
    z-index: 1;

    .menu-list {
      .menu-group {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        
        .list-cell {
          padding: 0 16px;
          
          &:active {
            background: rgba(60,150,243,0.05);
          }
          
          .menu-item-box {
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #f5f7fa;
            
            .left {
              display: flex;
              align-items: center;
              
              .menu-icon {
                font-size: 22px;
                color: #3c96f3;
                margin-right: 10px;
              }
              
              text {
                font-size: 15px;
                color: #333;
              }
            }
            
            .arrow {
              color: #ccc;
              font-size: 16px;
            }
          }
          
          &:last-child .menu-item-box {
            border-bottom: none;
          }
        }
      }
      
      .logout-btn {
        margin-top: 20px;
        height: 50px;
        background: #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        
        text {
          color: #ff4d4f;
          font-size: 15px;
          font-weight: 500;
        }
        
        &:active {
          background: rgba(255,77,79,0.05);
        }
      }
    }
  }
  
  // 装饰性背景圆
  .decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(5px);
    z-index: 0;
    
    &.circle-1 {
      width: 300px;
      height: 300px;
      top: -150px;
      right: -100px;
    }
    
    &.circle-2 {
      width: 200px;
      height: 200px;
      bottom: 50px;
      left: -100px;
    }
  }
}
</style>
